<template>
    <common-layout>
      <template #header>
        <div class="header-box">
            <div class="user">  
             <van-image
              round
              width="32"
              height="32"
              :src="$filters.imgUrlFormat(useCommon.user_info.avatar)"
            />
             <div class="user_name">{{useCommon.user_info.nick_name}}</div>
            </div>
            <div class="notice">
              <van-badge dot>
                 <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="tongzhixiaoxi"
                  @click="toNotice"
                  :size="22"
                  style="color: #e6e6e6"
                />
              </van-badge>
            </div>
        </div>
      </template>
      <template #content>
        <div class="swiper">
          <van-swipe :autoplay="5000" lazy-render>
          <van-swipe-item v-for="item in imgList" :key="item.id">
            <img :src="item.url"/>
          </van-swipe-item>
        </van-swipe>
        </div>
        <div class="content pd8">
          <van-tabs v-model:active="activeName" color="#28AE61" shrink swipeable sticky :offset-top="5">
            <van-tab title="推荐" name="recommend">
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
              <p>推荐</p>
            </van-tab>
            <van-tab title="关注" name="follow">
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
              <p>关注</p>
            </van-tab>
          </van-tabs>
        </div>
      </template>
    </common-layout>
</template>
<script lang="ts" setup>
import { useCommonStore } from "@/store/modules/common";
import { ref } from "vue";
const useCommon = useCommonStore();

const imgList = ref<{id: number; url: string}[]>([
  { id: 1, url:  new URL('../../assets/lb.jpg', import.meta.url).href},
])

const activeName = ref<string>('recommend')

const toNotice = () => {

}

</script>
<style lang="less">
.notice {
  .van-badge--top-right {
    right: 4px;
  }
}
.content {
  .van-tab--active {
    font-weight: 700;
    font-size: 16px;
  }
  .van-tabs__line {
    bottom: 20px;
  }
}
</style>
<style lang="less" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 10px;
  .user {
    display: flex;
    align-items: center;
    .user_name {
      margin-left: 10px;
      color: #333;
      font-weight: 600;
    }
  }
}
.swiper {
  img { 
    height: 120px;
    width: 100%;
    border-radius: 5px;
  }
}
</style>